<template>
  <view>
    <hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn">
      <view slot="bottom">
        <template>
          <view class="info">
            <view class="info_item">
              <view class="title">
                总匹数
              </view>
              <view class="text">
                0
              </view>
            </view>
            <view class="info_item">
              <view class="title">
                总梳理
              </view>
              <view class="text">
                0
              </view>
            </view>
          </view>
        </template>
      </view>
    </hx-navbar>
    <view class="card" ref="card">
      <view>
        <text class="text" @click="timerShow = true">{{searchData.timer}}</text>
      </view>
      <view class="card_rest">
        <view class="select_client">
          <text class="text" style="margin-right: 5rpx">选产品</text>
          <u-icon name="play-right-fill" color="#dddddd" size="12"></u-icon>
        </view>
        <view class="select_client" style="margin-left: 60rpx">
          <text class="text" style="margin-right: 5rpx">选客户</text>
          <u-icon name="play-right-fill" color="#dddddd" size="12"></u-icon>
        </view>
      </view>
    </view>

    <u-loading-page :loading="pageLoading"></u-loading-page>
    <scroll-view scroll-y refresher-enabled show-scrollbar :refresher-triggered="triggered"
                 @refresherrefresh="$u.throttle(onRefresherrefresh, 200)" @scrolltolower='$u.throttle(onScrolltolower,1000)'
                 :style="{height: `${screenHeight}px`, backgroundColor: '#fff'}">

      <view v-if="listData.length === 0" :style="{paddingTop: `${screenHeight / 4}px`}">
        <u-empty mode="list" />
      </view>

      <u-cell  v-for="item in listData" :key="item.id" :title="item.name">
      </u-cell>
    </scroll-view>

    <u-datetime-picker
        :show="timerShow"
        v-model="searchData.timer"
        mode="datetime"
        @close="timerShow = false"
        @confirm="timerShow = false"
        @cancel="timerShow = false"
    ></u-datetime-picker>

    <!-- 筛选弹框 - 1 -->
    <u-popup :show="show" mode="right" overlayOpacity="0.3" @close="show = false">
      <view class="pop-view">
        <view>
          <u-input placeholder="请输入单号、色号、颜色" v-model="searchData.orderNo" />
        </view>
        <u-cell title="产品类别: "></u-cell>
        <u-cell title="规格: "></u-cell>
        <u-cell title="缸号: "></u-cell>
        <u-cell title="仓库: "></u-cell>
        <view>
          <cx-select-customer title="门店" name="SelectShop"  />
        </view>
        <u-cell title="状态: "></u-cell>
        <u-cell title="发车状态: "></u-cell>
        <u-cell title="汇总: "></u-cell>
        <u-cell title="单据类型: "></u-cell>
        <u-cell title="隐藏已结算">
          <view slot="value">
            <u-switch></u-switch>
          </view>
        </u-cell>
        <u-cell title="隐藏已审核记录">
          <view slot="value">
            <u-switch></u-switch>
          </view>
        </u-cell>
        <u-cell title="显示明细数据">
          <view slot="value">
            <u-switch></u-switch>
          </view>
        </u-cell>
        <u-cell title="只显示换成异常">
          <view slot="value">
            <u-switch></u-switch>
          </view>
        </u-cell>
        <view class="fot-btn flex flex-sw p-l-10 p-r-10">
          <u-button text="重置" shape="circle" class="reset m-r-10"></u-button>
          <u-button text="搜索" shape="circle" color="linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246))"></u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  name: 'shipment-return',
  data() {
    return {
      config: {
        title: "退货订单",
        color: "#ffffff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
        rightButton: [
          {
            key: "btn1",
            icon: "&#xe888;",
            position: "left",
          },
        ],
      },
      searchData: {
        timer: Number(new Date()),
        orderNo: '',
      },
      timerShow: false,
      show: false,

      listData: [],
      pageInfo: {
        current: 1, // 当前页
        size: 15, // 每页数据条数
        order: 'desc', // 排序方向
      },
      pageLoading: false,
      triggered: false,
      screenHeight: 0
    }
  },
  mounted() {
    const height = this.$refs.hxnb.$el.offsetHeight + (this.$refs.card.$el.offsetHeight * 2.8);
    const sysInfo = uni.getSystemInfoSync()
    this.screenHeight = sysInfo.windowHeight - height
  },
  methods: {
    clickBtn(item) {
      if (item.key === "btn1") {
        this.show = true
      }
    },
    listPage() {

    },
    onRefresherrefresh() {
      this.triggered = true
      this.listData = []
      this.listPage()
    },
    onScrolltolower() {}
  }
}
</script>

<style scoped lang="scss">
.pop-view {
  width: 500rpx;
  padding-top: 200rpx;
  .fot-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: 20rpx;
  }
  .reset {
    color: #409eff;
    background-color: #e3edff;
  }
}
.info {
  display: flex;
  justify-content: space-around;
  margin-top: 20rpx;
  padding-bottom: 15rpx;
  .info_item {
    width: 160rpx;
    padding: 0 20rpx;
    text-align: center;
    .title {
      font-size: 28rpx;
      font-weight: inherit;
      color: #f6f6f6;
    }
    .text {
      margin-top: 5rpx;
    }
  }
}

.card_rest {
  display: flex;
}

.card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20rpx;
  margin-top: 115rpx;
  height: 70rpx;
  background-color: #FFFFFF;
  border-bottom: 1rpx solid #dddddd;
}

.select_client {
  display: flex;
  align-items: center;
}

.card .text {
  font-size: 24rpx;
  color: #757575;
  letter-spacing: 1rpx;
}
</style>
